<template>
    <div>
        computed 包含计算相关的处理事件，但不包含事件处理逻辑。
        const num= computed=()=>{}
    </div>
    <p>{{ num }}</p>

    <!--高级用法-->
    <div>
        <span>姓名：</span>
        <input type="text" v-model="fulluser">
    </div>
    <!--选择框案例 全选和反选 小选影响 全选-->
    <div>
        <span>全选</span> <input type="checkbox" v-model="isAll" /> 
        <button @click="btn">反选</button>
        <ul>
            <li v-for="(item , index) in arr" :key="index">
                <input type="checkbox" v-model="item.c">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>






</template>

<script setup>

import { computed, ref } from 'vue';

const a = 10
const b = 20
const num = computed(() => {
    return a + b
})
// 完整的计算属性
const fulluser = computed({
    get() {
        return "无名无姓"
    },
    set(value) {
        console.log(value);

    }
})
// 选择框的案例
const arr = ref([
    { name: '萧炎', c: false },
    { name: '萧熏儿', c: false },
    { name: '萧战', c: false },
    { name: '萧杜莎', c: false },
])
// 小选影响全选
// const isAll = computed(()=>{

//     // every 方法会检测数组中的每一项是否都满足条件，如果全部满足则返回true，否则返回false。
//     // 符合 和不符合的要求
//     return arr.value.every(item => item.c)
// })

// 全选 影响小选 需要采用完整的写法
const isAll = computed({
    get() { 
        return arr.value.every(item => item.c)
    },
    set(value) { 
        console.log(value);
        
        arr.value.forEach(item => item.c = value)
    }
})
const btn = () => { 
    arr.value.forEach(item => {
        console.log(item.c);
        
        return item.c = !item.c
    } )
}
</script>

<style scoped></style>